<template>
  <el-menu
    default-active="1"
    unique-opened="true"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#fab194"
    text-color="#fff"
    active-text-color="#ffffff"
  >
    <!-- 子菜单1 -->
    <el-submenu index="1" v-for="item of menulist" :key="item.parentId">
      <!-- 一级菜单标题 -->
      <template slot="title">
        <span>{{ item.permissionName }}</span>
      </template>
      <!-- 一级菜单对应的二级菜单 -->
      <el-menu-item
        :index="subitem.parentId + ''"
        v-for="subitem of item.children"
        :key="subitem.parentId"
        @click="handlerRoute(subitem.permissionHref)"
      >
        {{ subitem.permissionName }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {
      menulist: [],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handlerRoute(url) {
      this.$router.push(url);
    },
  },
  created(){
    this.menulist = JSON.parse(sessionStorage.getItem("menulist"));
  }
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #ffa07a;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #fab194;
  color: #333;
  text-align: center;
}

.el-menu{
  background-color: #fab194;
  line-height: 60px;
}
.el-main {
  background-color: #f9c8b4;
  color: #333;
  text-align: center;
  line-height: 60px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
